<template>
  <div class="photoList">
    <!-- 头部组件 -->
    <Navbar title="图文列表" />

    <div class="category-list">
      <ul>
        <li v-for="(category, index) in categoreyList" :key="index">
          <a
            href="javascript:void(0)"
            :class="{'active': index == curentIndex}"
            @click="categoryHandler(category.id)"
          >{{category.title}}</a>
        </li>
      </ul>
    </div>

    <!-- 图片展示区域 -->
    <div class="photo-list">
      <ul>
        <li v-for="(item,index) in imgList" :key="item.id">
          <router-link :to="{name: 'photo.detail', params: {newUrl: item.newUrl}}">
            <!-- <img :src="item.imgSrc" alt /> -->

            <!-- mint-ui lazy load  懒加载-->
            <img v-lazy="item.imgSrc" />
          </router-link>
          <p>
            <span>话题 {{index}}： {{item.picture_captions}}</span>
            <br />
            <span>{{item.picture_pape}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "photo.list",
  data() {
    return {
      categoreyList: "",
      imgList: "",
      curentIndex: 0
    };
  },
  methods: {
    categoryHandler(id) {
      this.$router.push({ name: "photo.list", params: { categoryId: id } });
      this.curentIndex = id;
    },
    loadImgByCategoryId(id) {
      /* 获取图文列表 */
      this.$axios
        .get("getimges?id=" + id)
        .then(res => {
          // console.log(res);
          this.imgList = res.data;

          /* 如果接受的数据为空 弹框提示 */
          if (this.imgList.length === 0) {
            this.$toast({
              message: "没有图片！！",
              duration: 1000,
              iconClass: "glyphicon glyphicon-heart",
              className: "mytoast"
            });
          }
        })
        .catch(err => {
          console.log("图文加载失败", err);
        });
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 通过 `vm` 访问组件实例
      vm.loadImgByCategoryId(to.params.categoryId);
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(to);
    this.loadImgByCategoryId(to.params.categoryId);

    next();
  },
  created() {
    this.$axios
      .get("getimgcategory")
      .then(res => {
        // console.log(res);
        this.categoreyList = res.data;
        this.categoreyList.unshift({ id: 0, title: "全部" });
      })
      .catch(err => {
        console.log("图文分享信息获取失败", err);
      });
  }
};
</script>


/* // 这里的 scoped 表示只在当前组件起作用 （局部） */
<style lang="css" scoped>
* {
  margin: 0;
  padding: 0;
}
.photoList {
  position: absolute;
  top: 41px;
  left: 0;
  width: 100%;
  /* height: 100%; */
  overflow: hidden;
  margin: 0;
  margin-bottom: 55px;
  padding: 0;
  border: 0;
}
.category-list {
  height: 40px;
  width: 100%;
  background-color: #ddd;
  color: #666;
}
.category-list ul {
  border-bottom: 1px solid #aca9a7;
  display: flex;
  align-items: center;
  overflow-y: hidden;
  flex-wrap: nowrap;
}
.category-list li {
  padding: 5px 20px;
  margin-right: 10px;
  background-color: #ccc;
  white-space: nowrap;
  border-radius: 5px;
}
.category-list li a {
  height: 30px;
  line-height: 30px;
}
.category-list li a.active {
  color: coral;
}
.photo-list {
  width: 100%;
  height: 100%;
}
.photo-list img {
  width: 100%;
}
/* 图片懒加载 样式 */
image[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.photo-list p span:first-child {
  display: block;
  font-size: 18px;
}
.photo-list p span:last-child {
  display: block;
  font-size: 16px;
  text-indent: 2em;
  margin-bottom: 10px;
}

/* mint-ui  小弹出框 */
.mytoast {
  color: red;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>

<style>
.mytoast {
  color: #eee !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
}
</style>